<template>
    <div class="page task">
        <div class="head">
            <img :src="serverData.post_url|imgBase"/>
        </div>
        <div class="con-des">
            <img :src="serverData.game_icon|imgBase"/>
            <div class="title">
                <h3>{{serverData.appname}}</h3>
                <p class="des">{{serverData.game_type}}|{{serverData.game_size}}M</p>
            </div>
            <a class="download" @click="downloadShow"><i></i></a>
        </div>
        <div class="tab-title">
            <div :class="{'on':tabIndex==0}" @click="tabChange(0)">游戏介绍</div>
            <div :class="{'on':tabIndex==1}" @click="tabChange(1)">游戏详情</div>
        </div>
        <div class="game-des tab-con" v-show="tabIndex==0">
            <h3 class="title">游戏介绍：</h3>
            <div class="con">
                {{{serverData.dianping}}}
            </div>
        </div>
        <div class="game-info tab-con" v-show="tabIndex==1">
            <h3 class="title">游戏详情:</h3>
            <div class="on">
                <ul class="left">
                    <li>语言：</li>
                    <li>游戏属性：</li>
                    <li>联网要求：</li>
                    <li>游戏付费：</li>
                    <li>开发者：</li>
                </ul>
                <ul class="right">
                    <li>{{serverData.language}}</li>
                    <li>{{serverData.gameattr}}</li>
                    <li>{{serverData.internet}}</li>
                    <li>{{serverData.gamepay}}</li>
                    <li>{{serverData.gamewriter}}</li>
                </ul>
            </div>
        </div>
        <div v-el:next class="next-game" @click="answerShow">
            <i>奖券x{{serverData.reward}}</i>
        </div>
        <div class="download" v-show="download">
            <div class="mask"></div>
            <div class="ui-con">
                <i class="cancel" @click="downloadClose"></i>
                <h3>游戏下载:{{serverData.game_size}}M</h3>
                <div class="list">
                    <a class="item icon_{{name}}" href="{{item.url}}" v-for="(name,item) in serverData.downloadpath">
                        {{item.name}}
                    </a>
                </div>
            </div>
        </div>
        <msg :data="errorData"></msg>
        <answer :is-show.sync="answer" :qst.sync="serverData.qst" :id="serverData._id"></answer>
    </div>
</template>
<script type="text/ecmascript-6">
    import './style/task.less'
    import server from '../lib/server'
    import {setSession,getSession} from '../lib/session'
    import {imgBase} from '../lib/args'
    import Answer from './components/Answer.vue'
    import Msg from '../components/Msg.vue'
    import fixed from '../lib/fixed'
    import share from '../lib/weixinShare'
    export default{
        data(){
            return {
                serverData:{},
                answer:false,
                errorData:{},
                server:getSession(),
                tabIndex:0,
                download:false
            }
        },
        filters:{
            imgBase
        },
        ready(){
            fixed(this.$el,this.$els.next,$(window).height()-6*parseFloat($('html').css('fontSize')));
            server('/P/U/appact_wx',{
                session_id:this.server.session_id
            }).success((response)=>{
                if(response.code==1){
                    this.serverData=response.data;
                    share({
                        title:`${this.serverData.appname}-游戏钱吧－为您推荐`
                    });
                }else{
                    if(response.code==19){
                        this.errorData={
                            show:true,
                            type:'login'
                        };
                    }else if(response.code==2){
                        alert(response.msg);
                        this.$router.go('home');
                    }else{
                        this.errorData={
                            show:true,
                            type:'error',
                            msg:response.msg
                        };
                    }
                }
            });
        },
        components:{
            Answer,Msg
        },
        methods:{
            downloadShow(){
                this.download=true;
            },
            downloadClose(){
                this.download=false;
            },
            answerShow(){
                if(this.serverData.qst){
                    this.answer=true;
                }else{
                    this.errorData={
                        show:true,
                        type:'error',
                        msg:'未从服务器端更新到新任务'
                    };
                }
            },
            tabChange(index){
                this.tabIndex=index;
            }
        }
    }
</script>